<template>
	<view class="content">
		<u-sticky bgColor="#fff">
		    <u-tabs :list="tabList" lineColor="#FD9618" :activeStyle="{ color: '#FD9618' }" :itemStyle="{ width: '50%',height: '40px' }" @click="tabClick"></u-tabs>
		</u-sticky>
		<view class="mainBox">
			<view v-if="curTab==0">
				<view class="list" v-for="(item, index) in list.billList" :key="item.id">
					<view class="liTop flex">
						<view class="name flex-1 line1">{{item.roomName}}</view>
						<view class="date">第<text class="yellow">{{item.num}}</text>期/共计{{item.totalNum}}期</view>
					</view>
					<view class="liCen">账单周期：{{timestamp(item.startTime)}}至{{timestamp(item.endTime)}}</view>
					<view class="liCen">应付日期：{{timestamp(item.oughtPayTime)}}</view>
					<view class="liBtm">
						<view class="li flex" v-for="(m, n) in item.orderFeesList" :key="n">
							<view class="tit">{{m.feeName}}:</view>
							<view class="txt flex-1 text-right">{{m.amount}} 元</view>
						</view>
						<view class="li flex">
							<view class="tit">优惠金额:</view>
							<view class="txt flex-1 text-right">{{item.discountAmount || 0}} 元</view>
						</view>
						<view class="li flex">
							<view class="tit">已付金额:</view>
							<view class="txt flex-1 text-right">{{item.paidRentUtilities || 0}} 元</view>
						</view>
						<view class="li liLast flex">
							<view class="tit yellow text-32rpx">合计:</view>
							<view class="txt flex-1 text-right yellow text-32rpx">{{item.unpaid || 0}}元</view>
						</view>
					</view>
					<u-button text="立即支付" type="primary" class="btn" @click="goPay(item.id,item)"></u-button>
				</view>
				<view v-if="!list.billList || list.billList.length == 0" class="flex-b">
					<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
				</view>
			</view>
			<view v-if="curTab==1">
				<view class="list yifu" v-for="(item, index) in list.billList">
					<view class="liTop flex">
						<view class="name flex-1 line1">{{item.roomName}}</view>
						<view class="date">第<text class="yellow">{{item.num}}</text>期/共计{{item.totalNum}}期</view>
					</view>
					<view class="liCen">账单周期：{{timestamp(item.startTime)}}至{{timestamp(item.endTime)}}</view>
					<view class="liCen">应付日期：{{timestamp(item.oughtPayTime)}}</view>
					<view class="liBtm">
						<view class="li flex" v-for="(m, n) in item.orderFeesList" :key="n">
							<view class="tit">{{m.feeName}}:</view>
							<view class="txt flex-1 text-right">{{m.amount}} 元</view>
						</view>
						<view class="li flex">
							<view class="tit">优惠金额:</view>
							<view class="txt flex-1 text-right">{{item.discountAmount || 0}} 元</view>
						</view>
						<view class="li liLast flex">
							<view class="tit yellow text-32rpx">合计:</view>
							<view class="txt flex-1 text-right yellow text-32rpx">{{item.paidRentUtilities || 0}}元</view>
						</view>
					</view>
				</view>
				<view v-if="!list.billList || list.billList.length == 0" class="flex-b">
					<u-empty mode="data" icon="https://www.mescroll.com/img/mescroll-empty.png"></u-empty>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
import { getBillsList } from '@/common/API/bills'
import { reactive, ref } from "vue";
import { onShow,onUnload,onLoad } from "@dcloudio/uni-app"
import dayjs  from "dayjs"

const curTab = ref(0)
const show = ref(false)

const tabList = reactive([{ name: '未付账单' },{ name: '已付账单' }])
// const columns = reactive(['全部', '南舒房.东辰里1栋1单元407', '南舒房.东辰里1栋1单元408'])
const list = reactive({
	billList: []
})
const flag = ref(false)
const form = reactive({
	pageSize: 10,
	pageNo: 1,
	payment: 'unpaid'
})
const tabClick = (e:any) => {
	curTab.value = e.index;
	form.payment = curTab.value == 0 ? 'unpaid' :'payment'
	list.billList = []
	getList()
}
onShow(() => {
	getList()
})
onLoad((options)=>{
	if(options){
		flag.value = options.flag
	}
})
onUnload(()=>{
	console.log('onUnload')
	if(!flag.value){
		uni.switchTab({
		    url: '/pages/personal/index',
		})
	}
})
const getList = async() => {
	let data = {
		pageSize: form.pageSize,
		pageNo: form.pageNo,
		payStatus: form.payment
	}
	// let data = {
	// 	payStatus: form.payment
	// }
	let res = await getBillsList(data)
	list.billList = res
}

//处理时间戳
const timestamp = (val:any,s) => {
	return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
}
const goPay = (id, item) =>{
	//判断是否支付前1期账单
	let arr = []
	list.billList.map((m,n)=>{
		if(m.roomId == item.roomId){
			arr.push(m)
		}
	})
	for(let i = 0 ;i<arr.length;i++){
		if(item.num > arr[i].num){
			uni.showToast({
				title: `请支付第${arr[i].num}期账单`,
				icon: 'none',
			});
			return
		}
	}
	console.log(111)
	uni.navigateTo({
		url: `/pages/personal/bills/billDetail?info=${encodeURIComponent(JSON.stringify(item))}`
	})
	// payId.value = id
	// getCoupon()
	// checkpopup.value.open()
	// uni.navigateTo({
	// 	url: `/pages/personal/pay/index?id=${id}&type=RENT_ORDER`
	// })
}
</script>
<style lang="scss" scoped>
.content{
	min-height: 100vh;
	background: #fff;
	::v-deep.u-sticky{
		border-bottom: 2rpx solid #E5E5E5;
		.u-tabs__wrapper__nav__line{
			bottom: 0;
		}
	}
	.mainBox{
		padding: 24rpx 32rpx;
		.list{
			background: #fff;
			border-radius: 8rpx;
			margin: 0 0 32rpx;
			padding: 32rpx;
			box-shadow: 0px 0px 16px  rgba(0, 0, 0, 0.08);
			&.yifu{
				background: url('#{$imgUrl}/icon/yifu.png') no-repeat 518rpx 40rpx;
				background-size: 128rpx 128rpx;
			}
			.liTop{
				margin-bottom: 14rpx;
				.name{
					font-size: 36rpx;
					line-height: 44rpx;
					color: #000;
				}
				.date{
					line-height: 44rpx;
					color: #999;
					margin-left: 20rpx;
				}
			}
			.liCen{
				line-height: 48rpx;
				color: #999;
			}
			.liBtm{
				border-top: 2rpx solid #E5E5E5;
				margin-top: 12rpx;
				padding-top: 12rpx;
				.li{
					line-height: 44rpx;
					.tit,.txt{
						color: #999;
						line-height: 44rpx;
					}
					.btn{
						text-align: right;
						font-size: 32rpx;
					}
				}
				.liLast{
					line-height: 64rpx;
					margin: 6rpx 0 0;
				}
			}
			.btn{
				width: 526rpx;
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 200rpx;
				margin-top: 30rpx;
			}
		}
	}
}
.flex-b{
	display: flex;
	align-items: center;
	justify-content: center;
}

</style>
